<template>
  <div class="box-card">
    <el-container>
      <el-header height="57px" class="pass-header">
        <div class="my-el-tabs">
          <el-tabs v-model="activePane">
            <el-tab-pane label="主队" name="home"/>
            <el-tab-pane label="客队" name="away"/>
          </el-tabs>
        </div>
      </el-header>
      <el-main class="pass-main">
        <HomeRating :rating="playersRating[0]"  v-show="activePane==='home'"/>
        <HomeRating :rating="playersRating[1]"  v-show="activePane==='away'"/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import HomeRating from "./HomeRating";
  import AwayRating from "./AwayRating";
  export default {
    name: "PlayerRating",
    props:{
      playersRating:{
        type:Array,
        default(){
          return []
        }
      },
    },
    components:{
      HomeRating,
      AwayRating
    },
    data(){
      return {
        activePane:'home'
      }
    },
  }
</script>

<style scoped>
  .box-card {
    margin: auto;
    width:  1440px;
    height: 553px;
  }
  .pass-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #194568;
    padding: 0;
  }
  .pass-main {
    width: 100%;
    height: 496px;
    padding: 0;
    background-color: #F1F6F9;
  }
  .my-el-tabs {
    margin-top: 15px;
    margin-right: 25px;
  }
  .my-el-tabs /deep/ .el-tabs__item {
    color: white;
    font-size: 20px;
    font-weight: bold;
  }
  .my-el-tabs /deep/ .el-tabs__nav-wrap::after {
    height: 0;
  }
  .my-el-tabs /deep/ .el-tabs__active-bar {
    height: 3px;
    background-color: #16C79A;
  }
  .my-el-tabs /deep/ .el-tabs__item:hover {
    color: #16C79A;
  }
  .my-el-tabs /deep/ .el-tabs__item.is-active {
    color: #16C79A;
  }
</style>